import {Component, EventEmitter, OnInit, Output, ViewChild} from '@angular/core';
import {DynamicComponent, DynamicComponentEvent} from '../../../../../ng-tools';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {TicketService} from '../../../../services/api/ticket.service';
import {HttpParams} from '@angular/common/http';

@Component({
  selector: 'charge-style-add-and-edit',
  templateUrl: './charge-style-add-and-edit.component.html',
  styleUrls: ['./charge-style-add-and-edit.component.scss']
})
export class ChargeStyleAddAndEditComponent implements OnInit, DynamicComponent {
  @ViewChild('fileInput') fileInput;
  @ViewChild('imageElement') imageElement;
  context: any;
  dynamic: true;
  events: DynamicComponentEvent;
  currentData;
  currentType;
  @Output() success = new EventEmitter();
  set data(value: any) {
    this.currentData = value.data;
    this.currentType = value.type;
  }
  currentForm: FormGroup;
  bankForm: FormGroup;
  airpayForm: FormGroup;
  wechatForm: FormGroup;
  imageUrl;
  userNameInfo;
  numberInfo;
  newFileName = '';
  constructor(private formBuilder: FormBuilder,
              private ticketService: TicketService) {
    this.bankForm = this.formBuilder.group({
      id: ['', ],
      throwName: ['', Validators.required],
      bankName: ['', Validators.required],
      userName: ['', Validators.required],
      number: ['', Validators.required],
      subAddr: ['', Validators.required],
      type: ['', Validators.required],
    });
    this.airpayForm = this.formBuilder.group({
      id: ['', ],
      throwName: ['', Validators.required],
      userName: ['', Validators.required],
      number: ['', Validators.required],
      type: ['', Validators.required],
      ewmFileName: ['', Validators.required],
    });
    this.wechatForm = this.formBuilder.group({
      id: ['', ],
      throwName: ['', Validators.required],
      userName: ['', Validators.required],
      number: ['', Validators.required],
      type: ['', Validators.required],
      ewmFileName: ['', Validators.required],
    });
  }

  ngOnInit() {
    this.currentData.type = this.currentType;
    switch (this.currentType) {
      case 1:
        this.currentForm = this.bankForm;
        this.currentForm.patchValue(this.currentData);
        this.userNameInfo = '开户名';
        this.numberInfo = '银行卡号';
        break;
      case 2:
        this.currentForm = this.airpayForm;
        this.currentForm.patchValue(this.currentData);
        this.userNameInfo = '收款户名';
        this.numberInfo = '收款账号';
        break;
      case 3:
        this.currentForm = this.wechatForm;
        this.currentForm.patchValue(this.currentData);
        this.userNameInfo = '收款户名';
        this.numberInfo = '收款账号';
        break;
    }
    if ((this.currentType === 2 || this.currentType === 3) && this.currentData !== {}) {
      this.imageUrl = this.ticketService.serverConfig.httpServer + this.ticketService.baseUrl + this.ticketService.urls.AccountInfoDownloader + '?action=ad&id=' + this.currentData.id;
    }
  }

  changeAvatar() {
    this.fileInput.nativeElement.click();
  }
  selectFile(e) {
    const formData = new FormData();
    formData.append('file_name', e.target.files[0].name);
    formData.append('file',  e.target.files[0]);
    this.ticketService.post(this.ticketService.urls.AccountInfoUploader, formData, {
      observe: 'response',
      params: new HttpParams().append('web_token', localStorage.getItem('token'))}).subscribe((resp) => {
      if (resp.body.success) {
        this.newFileName = resp.body.returnValue.newFileName;
        this.currentForm.patchValue({ewmFileName: this.newFileName});
        const reader = new FileReader();
        reader.readAsDataURL(e.target.files[0]);
        reader.onload = () => {
          this.imageUrl = reader.result;
          this.imageElement.nativeElement.src = this.imageUrl;
        };
      }
    });
  }

  trigger(eventName: string, ...args) {
    this[eventName].emit(...args);
    if (eventName in this.events) {
      this.events[eventName](...args);
    }
  }
  update() {
    if (this.currentForm.valid) {
      this.ticketService.post(this.ticketService.urls.saveAccountInfo, this.currentForm.value, {
        observe: 'response',
        params: new HttpParams().append('web_token', localStorage.getItem('token'))}).subscribe((resp) => {
        if (resp.body.success) {
          this.trigger('success');
        }
      });
    }
  }

}
